<template>
  <div class="settings">
    <div class="container">
      <div class="settings-header">
        <h1 class="page-title">设置</h1>
        <p class="page-description">
          个性化您的AI故事体验
        </p>
      </div>

      <!-- Settings Sections -->
      <div class="settings-content">
        <!-- Account Settings -->
        <div class="settings-section">
          <h2 class="section-title">
            <Users :size="20" />
            账户设置
          </h2>
          
          <div class="setting-item">
            <div class="setting-info">
              <h3>用户名</h3>
              <p>您的显示名称</p>
            </div>
            <div class="setting-control">
              <input 
                v-model="settings.username" 
                type="text" 
                class="form-input"
                @blur="saveSettings"
              />
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>邮箱地址</h3>
              <p>用于接收通知和找回密码</p>
            </div>
            <div class="setting-control">
              <input 
                v-model="settings.email" 
                type="email" 
                class="form-input"
                @blur="saveSettings"
              />
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>修改密码</h3>
              <p>定期更新密码以保护账户安全</p>
            </div>
            <div class="setting-control">
              <button @click="showPasswordModal = true" class="btn btn-secondary">
                修改密码
              </button>
            </div>
          </div>
        </div>

        <!-- Appearance Settings -->
        <div class="settings-section">
          <h2 class="section-title">
            <Palette :size="20" />
            外观设置
          </h2>

          <div class="setting-item">
            <div class="setting-info">
              <h3>主题模式</h3>
              <p>选择您偏好的界面主题</p>
            </div>
            <div class="setting-control">
              <div class="theme-selector">
                <button
                  v-for="theme in themes"
                  :key="theme.value"
                  @click="setTheme(theme.value)"
                  :class="{ active: settings.theme === theme.value }"
                  class="theme-option"
                >
                  <component :is="theme.icon" :size="16" />
                  <span>{{ theme.label }}</span>
                </button>
              </div>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>动画效果</h3>
              <p>启用或禁用界面动画</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.animations" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>粒子背景</h3>
              <p>显示动态粒子背景效果</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.particleBackground" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>

        <!-- AI Settings -->
        <div class="settings-section">
          <h2 class="section-title">
            <Bot :size="20" />
            AI设置
          </h2>

          <div class="setting-item">
            <div class="setting-info">
              <h3>创作风格</h3>
              <p>AI生成故事的默认风格偏好</p>
            </div>
            <div class="setting-control">
              <select v-model="settings.aiStyle" class="form-select" @change="saveSettings">
                <option value="creative">创意型</option>
                <option value="realistic">现实型</option>
                <option value="fantasy">奇幻型</option>
                <option value="romantic">浪漫型</option>
                <option value="mystery">悬疑型</option>
              </select>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>故事长度</h3>
              <p>AI生成故事的默认长度</p>
            </div>
            <div class="setting-control">
              <select v-model="settings.storyLength" class="form-select" @change="saveSettings">
                <option value="short">短篇 (500-1000字)</option>
                <option value="medium">中篇 (1000-3000字)</option>
                <option value="long">长篇 (3000字以上)</option>
              </select>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>自动保存</h3>
              <p>创作过程中自动保存草稿</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.autoSave" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>

        <!-- Notification Settings -->
        <div class="settings-section">
          <h2 class="section-title">
            <Bell :size="20" />
            通知设置
          </h2>

          <div class="setting-item">
            <div class="setting-info">
              <h3>浏览器通知</h3>
              <p>在浏览器中显示通知</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.browserNotifications" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>邮件通知</h3>
              <p>接收重要更新的邮件通知</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.emailNotifications" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>社交通知</h3>
              <p>当有人点赞或评论您的故事时通知您</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.socialNotifications" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>

        <!-- Privacy Settings -->
        <div class="settings-section">
          <h2 class="section-title">
            <Shield :size="20" />
            隐私设置
          </h2>

          <div class="setting-item">
            <div class="setting-info">
              <h3>个人资料可见性</h3>
              <p>控制其他用户是否可以查看您的个人资料</p>
            </div>
            <div class="setting-control">
              <select v-model="settings.profileVisibility" class="form-select" @change="saveSettings">
                <option value="public">公开</option>
                <option value="friends">仅好友</option>
                <option value="private">私密</option>
              </select>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>故事默认可见性</h3>
              <p>新创建故事的默认可见性设置</p>
            </div>
            <div class="setting-control">
              <select v-model="settings.defaultStoryVisibility" class="form-select" @change="saveSettings">
                <option value="public">公开</option>
                <option value="unlisted">不公开列出</option>
                <option value="private">私密</option>
              </select>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>数据分析</h3>
              <p>允许收集匿名使用数据以改进服务</p>
            </div>
            <div class="setting-control">
              <label class="toggle-switch">
                <input 
                  v-model="settings.analytics" 
                  type="checkbox"
                  @change="saveSettings"
                />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>

        <!-- Danger Zone -->
        <div class="settings-section danger-zone">
          <h2 class="section-title">
            <AlertTriangle :size="20" />
            危险操作
          </h2>

          <div class="setting-item">
            <div class="setting-info">
              <h3>导出数据</h3>
              <p>下载您的所有故事和数据</p>
            </div>
            <div class="setting-control">
              <button @click="exportData" class="btn btn-secondary">
                <Download :size="16" />
                导出数据
              </button>
            </div>
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <h3>删除账户</h3>
              <p>永久删除您的账户和所有数据</p>
            </div>
            <div class="setting-control">
              <button @click="showDeleteModal = true" class="btn btn-danger">
                <Trash2 :size="16" />
                删除账户
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Password Change Modal -->
    <div v-if="showPasswordModal" class="modal-overlay" @click="showPasswordModal = false">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h2>修改密码</h2>
          <button @click="showPasswordModal = false" class="close-btn">
            <X :size="20" />
          </button>
        </div>
        
        <div class="modal-body">
          <div class="form-group">
            <label>当前密码</label>
            <input v-model="passwordForm.current" type="password" class="form-input" />
          </div>
          
          <div class="form-group">
            <label>新密码</label>
            <input v-model="passwordForm.new" type="password" class="form-input" />
          </div>
          
          <div class="form-group">
            <label>确认新密码</label>
            <input v-model="passwordForm.confirm" type="password" class="form-input" />
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="showPasswordModal = false" class="btn btn-secondary">取消</button>
          <button @click="changePassword" class="btn btn-primary">确认修改</button>
        </div>
      </div>
    </div>

    <!-- Delete Account Modal -->
    <div v-if="showDeleteModal" class="modal-overlay" @click="showDeleteModal = false">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h2>删除账户</h2>
          <button @click="showDeleteModal = false" class="close-btn">
            <X :size="20" />
          </button>
        </div>
        
        <div class="modal-body">
          <div class="warning-message">
            <AlertTriangle :size="24" />
            <p>此操作无法撤销！删除账户将永久移除您的所有故事、评论和个人数据。</p>
          </div>
          
          <div class="form-group">
            <label>请输入您的密码确认删除</label>
            <input v-model="deleteForm.password" type="password" class="form-input" />
          </div>
          
          <div class="form-group">
            <label>
              <input v-model="deleteForm.confirm" type="checkbox" />
              我确认要删除我的账户和所有数据
            </label>
          </div>
        </div>
        
        <div class="modal-footer">
          <button @click="showDeleteModal = false" class="btn btn-secondary">取消</button>
          <button 
            @click="deleteAccount" 
            :disabled="!deleteForm.confirm || !deleteForm.password"
            class="btn btn-danger"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useStoriesStore } from '../stores/stories'
import { useToast } from 'vue-toastification'
import {
  Users,
  Palette,
  Bot,
  Bell,
  Shield,
  AlertTriangle,
  Download,
  Trash2,
  X,
  Sun,
  Moon,
  Monitor
} from 'lucide-vue-next'

const authStore = useAuthStore()
const storiesStore = useStoriesStore()
const toast = useToast()

const showPasswordModal = ref(false)
const showDeleteModal = ref(false)

const themes = ref([
  { value: 'light', label: '浅色', icon: Sun },
  { value: 'dark', label: '深色', icon: Moon },
  { value: 'auto', label: '跟随系统', icon: Monitor }
])

const settings = reactive({
  username: '',
  email: '',
  theme: 'auto',
  animations: true,
  particleBackground: true,
  aiStyle: 'creative',
  storyLength: 'medium',
  autoSave: true,
  browserNotifications: true,
  emailNotifications: false,
  socialNotifications: true,
  profileVisibility: 'public',
  defaultStoryVisibility: 'public',
  analytics: true
})

const passwordForm = reactive({
  current: '',
  new: '',
  confirm: ''
})

const deleteForm = reactive({
  password: '',
  confirm: false
})

const setTheme = (theme) => {
  settings.theme = theme
  saveSettings()
  // Apply theme immediately
  document.documentElement.setAttribute('data-theme', theme)
}

const saveSettings = () => {
  // Save settings to localStorage or send to API
  localStorage.setItem('userSettings', JSON.stringify(settings))
  toast.success('设置已保存')
}

const changePassword = () => {
  if (passwordForm.new !== passwordForm.confirm) {
    toast.error('新密码确认不匹配')
    return
  }
  
  if (passwordForm.new.length < 6) {
    toast.error('密码长度至少6位')
    return
  }
  
  // Here you would typically call an API to change password
  toast.success('密码修改成功')
  showPasswordModal.value = false
  
  // Reset form
  Object.assign(passwordForm, {
    current: '',
    new: '',
    confirm: ''
  })
}

const exportData = () => {
  const userData = {
    profile: authStore.user,
    stories: storiesStore.stories,
    settings: settings
  }
  
  const dataStr = JSON.stringify(userData, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  
  const link = document.createElement('a')
  link.href = URL.createObjectURL(dataBlob)
  link.download = `aistory-data-${new Date().toISOString().split('T')[0]}.json`
  link.click()
  
  toast.success('数据导出成功')
}

const deleteAccount = () => {
  if (!deleteForm.confirm || !deleteForm.password) {
    toast.error('请确认删除操作')
    return
  }
  
  // Here you would typically call an API to delete account
  toast.success('账户删除请求已提交')
  showDeleteModal.value = false
  
  // Logout and redirect
  setTimeout(() => {
    authStore.logout()
  }, 2000)
}

onMounted(() => {
  // Load settings from localStorage
  const savedSettings = localStorage.getItem('userSettings')
  if (savedSettings) {
    Object.assign(settings, JSON.parse(savedSettings))
  }
  
  // Load user data
  if (authStore.user) {
    settings.username = authStore.user.username
    settings.email = authStore.user.email || ''
  }
})
</script>

<style scoped>
.settings {
  padding: var(--spacing-2xl) 0;
  min-height: 100vh;
}

.settings-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.page-title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-md);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.settings-content {
  max-width: 800px;
  margin: 0 auto;
}

.settings-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.settings-section.danger-zone {
  border-color: var(--error-color);
  background: rgba(239, 68, 68, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-xl) 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.danger-zone .section-title {
  color: var(--error-color);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: var(--spacing-lg);
}

.setting-info h3 {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.setting-info p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.setting-control {
  flex-shrink: 0;
}

.form-input,
.form-select {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  min-width: 200px;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.theme-selector {
  display: flex;
  gap: var(--spacing-xs);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}

.theme-option.active,
.theme-option:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  transition: var(--transition-fast);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: var(--transition-fast);
}

input:checked + .toggle-slider {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
  margin: 0;
  color: var(--text-primary);
}

.close-btn {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.close-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.modal-body {
  padding: var(--spacing-xl);
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.modal .form-input {
  width: 100%;
  min-width: auto;
}

.warning-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.warning-message svg {
  color: var(--error-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.warning-message p {
  margin: 0;
  color: var(--error-color);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .setting-info {
    margin-right: 0;
  }

  .form-input,
  .form-select {
    min-width: 100%;
  }

  .theme-selector {
    width: 100%;
  }

  .theme-option {
    flex: 1;
    justify-content: center;
  }
}
</style>
